<template>
  <div>
<!--    集群测试-登陆服务器-->
    <el-form ref="form" :model="form" label-width="150px">
      <el-form-item :label="$t('LoginForm_Server')">
<!--      <el-form-item label="服务器地址">-->
        <el-input v-model.trim="form.ip" :placeholder="$t('LoginForm_PleaseinputserverIPURL')" style="width: 50%"></el-input>
<!--        <el-input v-model.trim="form.ip" placeholder="请填写服务器地址" style="width: 50%"></el-input>-->
        <span class="tishi">{{$t('LoginForm_example')}}</span>
      </el-form-item>
      <el-form-item :label="$t('LoginForm_Username')">
<!--      <el-form-item label="用户名">-->
        <el-input v-model.trim="form.username" :placeholder="$t('LoginForm_Pleaseinputusername')" style="width: 50%"></el-input>
<!--        <el-input v-model.trim="form.username" placeholder="请填写面板登录用户名" style="width: 50%"></el-input>-->
      </el-form-item>
      <el-form-item :label="$t('LoginForm_Password')">
<!--      <el-form-item label="密码">-->
        <el-input type="password" autocomplete='off' v-model.trim="form.password" :placeholder="$t('LoginForm_Pleaseinputpassword')" style="width: 50%"></el-input>
<!--        <el-input type="password" v-model.trim="form.password" placeholder="请填写面板登录密码" style="width: 50%"></el-input>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">{{ $t('LoginForm_LoginWord')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Input, Button } from 'element-ui'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
export default {
  data () {
    return {
      form: {
        ip: '',
        username: '',
        password: ''
      }
    }
  },
  methods: {
    // 切换ip
    login () {
      let formdata = new FormData()
      formdata.append('username', this.form.username)
      formdata.append('password', this.form.password)
      let  requestOptions = {
        method: 'POST',
        body: formdata,
        redirect: 'follow'
      }
      // http://101.132.67.201:8081/login
      fetch(this.form.ip + '/login', requestOptions)
        .then(response => {
          return response.json()
        })
        .then(res => {
          if (res.Code === 200) {
            this.$message({
              showClose: true,
              message: '连接成功！自动刷新页面，请耐性等待！',
              type: 'success'
            })
            // 拼接user
            const user = {
              username: this.form.username,
              token: res.Data,
              baseURL: this.form.ip
            }
            // 更新token
            localStorage.setItem('token', res.Data)
            // 更新user
            localStorage.setItem('user', JSON.stringify(user))
            // 存baseURL
            localStorage.setItem('baseURL', this.form.ip)
            // 存userList之前判断有没有
            let userList = localStorage.getItem('userList')
            if (userList) {
              userList = JSON.parse(userList)
              userList.push(user)
              localStorage.setItem('userList', JSON.stringify(userList))
            } else {
              localStorage.setItem('userList', JSON.stringify([user]))
            }
            // 500毫秒后刷新页面
            setTimeout(() => {
              location.reload()
            }, 500)
          } else {
            this.$message({
              showClose: true,
              message: res.Msg || '登录失败！请重试。',
              type: 'error'
            })
          }
        })
        .catch(() => {
          return this.$message({
            showClose: true,
            message: '网络连接失败，请稍候重试！',
            type: 'error'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.tishi{
  font-size: 12px;
  color: #ccc;
  padding-left: 10px;
}
</style>
